<template>
  <el-card header="设备位置" class="user-device-location">
    <div id="map-container" class="h-sm" />
  </el-card>
</template>

<script setup lang="ts">
import DeviceAPI from "@/api/device";
import { AMapManager } from "@/utils/AMapManager";

defineOptions({
  name: "UserDeviceLocation",
});
// 坐标
let coords: any = {};

const props = defineProps({
  sn: {
    type: String,
    default: "",
  },
});

let manManager: AMapManager;

onMounted(async () => {
  await fetchData();
  await viewMap();
  addMarker();
});

onUnmounted(() => {
  manManager.destroy();
});

/**
 * @description 获取地图坐标
 */
async function fetchData() {
  const res = await DeviceAPI.getDeviceAddressBySn(props.sn);
  coords = res;
}

/**
 * @description 绘制地址标注点
 */
function addMarker(): void {
  manManager.addMarker([coords.lon, coords.lat], "", "", "", {});
}

/**
 * @description 初始化高德地图
 */
async function viewMap() {
  manManager = new AMapManager({
    elementId: "map-container",
    zoom: 14,
    center: [coords.lon, coords.lat],
  });
  await manManager.init();
}
</script>
